import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import Header from '../components/Header.jsx';

const styles = {
  container: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    minHeight: '100vh',
    background: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)',
    padding: '2rem',
  },
  card: {
    background: 'rgba(255, 255, 255, 0.95)',
    borderRadius: '20px',
    padding: '2.5rem',
    width: '100%',
    maxWidth: '400px',
    boxShadow: '0 8px 32px rgba(31, 38, 135, 0.15)',
    backdropFilter: 'blur(10px)',
    border: '1px solid rgba(255, 255, 255, 0.3)',
  },
  title: {
    textAlign: 'center',
    color: '#2c3e50',
    fontSize: '2rem',
    marginBottom: '2rem',
    fontWeight: '600',
    background: 'linear-gradient(45deg, #4CAF50, #45a049)',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
  },
  form: {
    display: 'flex',
    flexDirection: 'column',
    gap: '1.5rem',
  },
  inputContainer: {
    position: 'relative',
  },
  input: {
    width: '100%',
    padding: '1rem',
    border: '2px solid #e0e0e0',
    borderRadius: '10px',
    fontSize: '1rem',
    transition: 'all 0.3s ease',
    paddingLeft: '2.5rem',
    ':focus': {
      borderColor: '#4CAF50',
      boxShadow: '0 0 0 3px rgba(76, 175, 80, 0.2)',
      outline: 'none',
    },
  },
  icon: {
    position: 'absolute',
    left: '12px',
    top: '50%',
    transform: 'translateY(-50%)',
    color: '#95a5a6',
    fontSize: '1.2rem',
  },
  button: {
    padding: '1rem',
    background: 'linear-gradient(45deg, #4CAF50, #45a049)',
    color: 'white',
    border: 'none',
    borderRadius: '10px',
    cursor: 'pointer',
    fontSize: '1rem',
    fontWeight: '600',
    transition: 'all 0.3s ease',
    ':hover': {
      transform: 'translateY(-2px)',
      boxShadow: '0 5px 15px rgba(76, 175, 80, 0.3)',
    },
  },
  switchText: {
    textAlign: 'center',
    color: '#7f8c8d',
    marginTop: '1.5rem',
    a: {
      color: '#4CAF50',
      textDecoration: 'none',
      fontWeight: '600',
      ':hover': {
        textDecoration: 'underline',
      },
    },
  },
};

const Auth = ({ type }) => {
  const [formData, setFormData] = useState({
    username: '',
    password: '',
    email: ''
  })
  const navigate = useNavigate()
  const handleUsernameChange = (e)=>{
    setFormData({username:e.target.value,password:formData.password,email:formData.email})
  }
  const handlePasswordChange = (e)=>{
    setFormData({username:formData.username,password:e.target.value,email:formData.email})
  }
  const handleEmailChange = (e)=>{
    setFormData({username:formData.username,password:formData.password,email:e.target.value})
  }
  const handleSubmit = (e) => {
    e.preventDefault();
    if(type==='login'){
      console.log('登录成功!用户名：',formData.username,'密码',formData.password);
      setFormData({username:'',password:'',email:''});
      navigate("/home")
    }else if(type==='register'){
      console.log('注册成功!用户名：',formData.username,'密码',formData.password);
      setFormData({username:'',password:'',email:''});
      navigate("/")
    }
  }
  return (
    <div>
        <Header />  
        <div style={styles.container}>
        <div style={styles.card}>
            <h2 style={styles.title}>
            {type === 'login' ? '欢迎回来' : '创建账号'}
            </h2>
            <form style={styles.form} onSubmit={handleSubmit}>
            {type === 'register' && (
                <div style={styles.inputContainer}>
                <input
                    type="email"
                    placeholder="电子邮箱"
                    style={styles.input}
                    onChange={handleEmailChange}
                />
                <span style={styles.icon}>✉️</span>
                </div>
            )}
            
            <div style={styles.inputContainer}>
                <input
                type="text"
                placeholder="用户名"
                style={styles.input}
                onChange={handleUsernameChange}
                />
                <span style={styles.icon}>👤</span>
            </div>

            <div style={styles.inputContainer}>
                <input
                type="password"
                placeholder="密码"
                style={styles.input}
                onChange={handlePasswordChange}
                />
                <span style={styles.icon}>🔒</span>
            </div>

            <button type="submit" style={styles.button}>
                {type === 'login' ? '立即登录' : '免费注册'}
            </button>

            <div style={styles.switchText}>
                {type === 'login' ? (
                <>没有账号？<a href="/register">立即注册</a></>
                ) : (
                <>已有账号？<a href="/">立即登录</a></>
                )}
            </div>
            </form>
        </div>
        </div>
    </div>
  );
};

export default Auth;